<template>
    <div class="app-container" style="padding:20px">
        <el-card>
            <FormTopBar title="招聘计划" :flowInsId="form.flowInsId" :taskId="taskId" :businessId="form.id"
                        :billType="form.billType" @submitForm="submitForm"></FormTopBar>
        </el-card>

        <!--  -->
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="readonly">
            <el-card class="top15">
                <div slot="header" class="clearfix">
                    <span>基础信息</span>
                    <span style="float: right" v-if="form.id!=undefined">单据编号：{{form.billCode}}</span>
                </div>
                <el-form-item label="相关需求" prop="demandId">
                    <el-select v-model="form.demandItemId" placeholder="请选择相关需求（可选，非必填）" @change="selectDemand">
                        <el-option-group v-for="group in demandOptions" :key="group.title" :label="group.title">
                            <el-option v-for="item in group.itemList" :key="item.value" :label="'部门:'+item.deptName+';岗位:'+item.postName+';数量:'+item.needCount" :value="item.value"></el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
                <el-row :gutter="10" class="mb8">
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="需求部门" prop="demandDeptId">
                            <treeselect v-model="form.demandDeptId" :options="deptOptions" :normalizer="normalizer" placeholder="请选择需求部门"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="岗位" prop="demandPostId">
                            <el-select v-model="form.demandPostId" placeholder="请选择岗位">
                                <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="需要人数" prop="demandCount">
                            <el-input v-model="form.demandCount" type="number" placeholder="请输入需要人数"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="最低薪资" prop="deptId">
                            <el-input v-model="form.salaryMin" type="number" placeholder="请输入最低薪资"/>
                        </el-form-item>
                    </el-col>


                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="最高薪资" prop="deptId">
                            <el-input v-model="form.salaryMax" type="number" placeholder="请输入最高薪资"/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10" class="mb8">
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="计划开始时间" prop="planStartTime">
                            <el-date-picker clearable v-model="form.planStartTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择计划开始时间"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="计划完成时间" prop="planCompleteTime">
                            <el-date-picker clearable v-model="form.planCompleteTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择计划完成时间"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="责任人" prop="dutyUser">
                            <el-input v-model="form.dutyUser" placeholder="请输入责任人"/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="岗位需求" prop="postDemand">
                    <editor v-model="form.postDemand" :min-height="300" :disabled="readonly"/>
                </el-form-item>
            </el-card>
        </el-form>

    </div>
</template>
<script>
import {listRecruitPlan, getRecruitPlan, delRecruitPlan, addRecruitPlan, updateRecruitPlan} from "@/api/hrm/recruitPlan";
import {getDemandOptions} from "@/api/hrm/recruitDemand";
import FlowInfo from "@/views/workflow/flow/flowInfo";
import {listDept} from "@/api/system/dept";
import {listPostAll} from "@/api/system/post"
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import FormTopBar from "@/views/workflow/common/formTopBar"
export default {
    name: "RecruitPlanForm",
    dicts: ['oa_flow_billstatus'],
    components:{FlowInfo,Treeselect,FormTopBar},
    data() {
        return {
            // 职位选项
            postOptions: [],
            // 部门树选项
            deptOptions: [],
            // 需求选项
            demandOptions: [],
            showFlowInfo:false,
            taskId:'',
            readonly:false,
            showCommitDialog:false,
            commitType:"",
            // 表单参数
            form: {
            },
            // 表单校验
            rules: {
                demandPostId: [
                    {required: true, message: "岗位不能为空", trigger: "blur"}
                ],
                demandCount: [
                    {required: true, message: "需要人数不能为空", trigger: "blur"}
                ],
                planStartTime: [
                    {required: true, message: "计划开始时间不能为空", trigger: "blur"}
                ],
                planCompleteTime: [
                    {required: true, message: "计划完成时间不能为空", trigger: "blur"}
                ],
            },

        };
    },
    created() {
        //获取组织结构树
        this.getDeptTreeData();
        //获取岗位数据
        this.getPostData();
        //获取需求
        this.getDemandOptionsData();
        //单据的id主键
        const formId = this.$route.params && this.$route.params.formId;
        //单据的类型
        const billType = this.$route.params && this.$route.params.billType;
        const taskId = this.$route.query && this.$route.query.taskId;
        const readonly = this.$route.query && this.$route.query.readonly;
        if(billType){
            this.form.billType = billType;
        }
        if(taskId){
            this.taskId = taskId;
        }
        if("1"==readonly){
            this.readonly = true;
        }
        if(formId){
            this.form.id = formId;
            this.getDetailData(formId);
        }
    },
    provide(){
        return {
            addCcedList:this.addCcedList
        }
    },
    methods: {
        getDeptTreeData(){
            listDept().then(response => {
                this.deptOptions = this.handleTree(response.data, "deptId");
            });
        },
        getPostData(){
            listPostAll().then(res=>{
                this.postOptions = res.data;
            })
        },
        getDemandOptionsData(){
            getDemandOptions().then(res=>{
                this.demandOptions = res.data;
            })
        },
        /** 转换部门数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.deptId,
                label: node.deptName,
                children: node.children
            };
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateRecruitPlan(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.closeThisPage();
                        });
                    } else {
                        addRecruitPlan(this.form).then(response => {
                            this.$modal.msgSuccess("保存成功");
                            this.closeThisPage();
                        });
                    }
                }
            });
        },
        //  获取单据信息
        getDetailData(id) {
            getRecruitPlan(id).then(response => {
                this.form = response.data;
            });
        },
        closeThisPage(){
            this.$tab.closeOpenPage({ path: "/hrm/recruit/recruitPlan",query: {billType:this.form.billType}});
        },
        selectDemand(value){
              console.log(value);
              let selectData = {};
              this.demandOptions.forEach(item=>{
                  if(item.itemList && item.itemList.length>0){
                      item.itemList.forEach(option=>{
                          if(value == option.value){
                              this.form.demandId = item.id;
                              this.form.demandDeptId = option.deptId;
                              this.form.demandPostId = option.postId;
                              this.form.demandCount = option.needCount;
                              this.form.postDemand = option.postDemand;

                              this.form.salaryMin = option.salaryMin;
                              this.form.salaryMax = option.salaryMax;
                          }
                      })
                  }
              })

        },
        // 创建单据时候，选择了抄送人
        addCcedList(ccedList){
            this.form.ccedList = ccedList;
            console.log("回填抄送人")
            console.log(this.form)
        }
    }
};
</script>
